import React from "react";
import ReactDOM from "react-dom/client";

/**
 * 事件处理函数，会自动收到一个事件对象 event
 *
 * React中的事件对象（event）是一个合成事件对象（原生的事件对象中添加了一些额外的属性与操作）
 *    1. 处理兼容问题
 *        event.阻止默认行为
 *        event.阻止冒泡
 *    2. 没有 Vue 中 $event 这个玩意
 *
 * 事件处理函数，接收参数的同时如何接收 event
 *
 */

class App extends React.Component {
  handleClick = (event) => {
    console.log(event);
  };

  // 最后一个参数，自动收到事件对象
  fn1 = (name, age, event) => {
    console.log("fn1===", name, age);
    // 阻止默认行为 event
    event.preventDefault();
  };

  fn2 = (name, age, event) => {
    console.log("fn2===", name, age);
    // 阻止默认行为 event
    event.preventDefault();
  };

  render() {
    return (
      <div>
        <h1>App</h1>

        <button onClick={this.handleClick}>点我</button>

        <button
          onClick={(event) => {
            console.log("箭头", event);
            this.handleClick("张三", 18);
          }}
        >
          点我
        </button>

        {/* 接收参数的同时 + event */}
        <a
          href="https://www.baidu.com"
          onClick={this.fn1.bind(this, "张三", 18)}
        >
          点我
        </a>

        <a
          href="https://www.baidu.com"
          onClick={(event) => {
            console.log("箭头", event);
            this.fn2("张三", 18, event);
          }}
        >
          点我
        </a>
      </div>
    );
  }
}

const root = ReactDOM.createRoot(document.querySelector("#root"));
root.render(<App />);
